<!DOCTYPE html>
<html>

<head>
    <meta charset="UTF-8">
    <title>类组件的props</title>
</head>

<body>
    <h1>类组件的props</h1>
    <ol>
        <li>类组件需要使用{this.props.属性名}获取外部传入的属性值。</li>
        <li>如果要在构造函数中使用props，那么加上该参数，并且使用super(props)来初始化</li>
    </ol>
    <hr />
    <div id="demoReact"></div>
    <script src="../../node_modules/babel-standalone/babel.min.js"></script>
    <script src="../../node_modules/react/umd/react.development.js"></script>
    <script src="../../node_modules/react-dom/umd/react-dom.development.js"></script>
    <script type="text/babel">

        class Com extends React.Component {

            // 如果要在构造函数中使用props，那么加上该参数，并且使用super(props)来初始化
            constructor(props) {
                super(props);
                console.log("props.name = ",this.props.name);
            }

            render() {
                return (
                    <div>我是一个类组件，姓名：{this.props.name}，年龄：{this.props.age}</div>
                )
            }
        }

        let obj = {
            name: "奉先",
            age: 33,
        }

        let com = <Com {...obj} />;

        // 创建根节点
        let root = ReactDOM.createRoot(document.getElementById("demoReact"));

        // 渲染组件
        root.render(com);

    </script>
</body>

</html>